import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {useInstall} from '../features/Context';
import '../features/Phone';

const Carousel = ({navi}) => {
    const {setIsInstall} = useInstall();

    return (
        <Swiper 
            height={h}
            loop={false}
            autoplay={true}
            autoplayTimeout={3}
            horizontal={true}
            paginationStyle={{
                bottom:h/6,
            }}
            showsButtons={false}
            showsPagination={true}
            dot={<View style={{
                backgroundColor: 'rgba(220,220,220,0.3)',
                width: 10,
                height: 10,
                borderRadius: 5,
                marginLeft: 16,
                marginRight: 16,
                marginTop: 9,
                marginBottom: 9,
            }}/>}
            activeDot={<View style={{
                backgroundColor: 'white',
                width: 10,
                height: 10,
                borderRadius: 5,
                marginLeft: 16,
                marginRight: 16,
                marginTop: 9,
                marginBottom: 9,
            }}/>}
        >
            <View style={styles.item}>
                <Image 
                    source={require('../assets/start4.png')}
                    style={styles.img}
                />
            </View>
            <View style={styles.item}>
                <Image 
                    source={require('../assets/start2.png')}
                    style={styles.img}
                />
            </View>
            <View style={[styles.item,{position:'relative'}]}>
                <Image 
                    source={require('../assets/start1.png')}
                    style={[styles.img,{position:'absolute'}]}
                />
                <TouchableOpacity
                    style={styles.btn}
                    activeOpacity={0.7}
                    onPress={()=>{
                        setIsInstall(true);
                        AsyncStorage.setItem('install', 'true');
                        }}
                >
                    <Text 
                        style={{
                            fontSize: 18,
                            color:'white',
                            textAlign:'center',
                            lineHeight:44,
                        }}
                    >
                        立即体验
                    </Text>
                </TouchableOpacity>
            </View>
        </Swiper>
    )
}

const styles = StyleSheet.create({
    item: {
        width: w,
        height: h,
    },
    img: {
        width: w,
        height: h,
    },
    btn: {
        width: 200,
        height: 44,
        borderRadius: 22,
        backgroundColor: 'rgba(220,220,220,0.3)',
        left: (w-200)/2,
        bottom: h/15,
        position: 'absolute'
    }
})

export default Carousel